<template>
  <div>
    <div class="gpt-style-container">
      <div class="dialog-container" v-loading.fullscreen.lock="loading"
           element-loading-text="Generating answers...Please wait">
        <div class="gpt-dialog" v-if="dialog.length > 0" v-for="(item, index) in dialog" :key="index">
          <div class="user-message">You：</div>
          <div class="message-content">{{ item.userInput }}</div>
          <div class="gpt-message">Answer：</div>
          <div class="message-content">{{ item.answer }}</div>
        </div>
      </div>

      <div v-if="isWelcomeVisible" class="welcome-message">
        <p class="welcome-text">How can I help you?</p>
        <p class="tips">⬅Please select the domain first</p>
        <p class="example-question">Example 1：What's the advantage of spring boot?</p>
        <p class="example-question">Example 2：What can we do with the help of Git?</p>
      </div>

      <div class="user-input-container">
        <el-form :model="form" ref="questionForm" label-width="0">
          <el-row>
            <el-input style="width: 50%;left: 25%;padding-top: 20px" v-model="userInput"
                      placeholder="Please enter your question"
                      @keydown.enter.native="onEnterKey">
              <el-button slot="append" type="primary" @click="askQuestion" style="font-weight: bold;color: #2c3e50">
                send
              </el-button>
            </el-input>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>

</template>

<script>
import qaApi from "@/api/modules/QaApi";

export default {
  props: {
    domain: {
      type: String,
      default: "",
    },
    domainId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      userInput: '',
      answer: null,
      form: {
        userInput: '',
      },
      dialog: [],
      isWelcomeVisible: true,
      loading: false
    };
  },
  created() {
  },
  methods: {
    onEnterKey(event) {
      // 检查按下的键是否是 Enter 键（键码为 13）
      if (event.keyCode === 13) {
        // 阻止默认的 Enter 键行为（换行）
        event.preventDefault();
        // 调用发送方法
        this.askQuestion();
      }
    },
    askQuestion() {
      if(this.domain === '') {
        this.$alert('Select the domain first', 'Message', {
          confirmButtonText: 'confirm',
          // callback: action => {
          //   this.$message({
          //     type: 'info',
          //     message: `action: ${action}`
          //   });
          // }
        })
        return
      }

      // 隐藏欢迎消息
      this.isWelcomeVisible = false;

      const userQuestion = this.userInput;
      let data = {
        domain: this.domain,
        question: this.userInput
      }
      this.loading = true;

      console.log(data);
      qaApi.getAnswer(data).then(response => {
        console.log(response);
        this.loading = false;
        this.answer = response.msg;

        // 将用户提问和模型回答添加到对话记录中
        this.dialog.push({userInput: userQuestion, answer: this.answer});

        // 清空用户输入
        this.userInput = '';

        // 滚动到底部
        this.$nextTick(() => {
          const dialogContainer = this.$el.querySelector('.dialog-container');
          dialogContainer.scrollTop = dialogContainer.scrollHeight;
        });
      })
    },
  },
};
</script>

<style scoped>
.gpt-style-container {
  width: 78%;
  right: 0;
  position: fixed;
}

.dialog-container {
  /*display: table;*/
  position: fixed;
  width: 78%;
  left: 22%;
  height: 80%;
  max-height: 80%;
  overflow-y: auto; /* 启用纵向滚动条 */
}

.gpt-dialog {
  position: relative;
  width: 60%;
  left: 20%;
  background-color: #f4f4f4;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 20px;
  margin-top: 20px;
}

.user-message,
.gpt-message {
  font-weight: bold;
}

.message-content {
  margin-bottom: 10px;
}

.user-input-container {
  position: fixed;
  bottom: 0px;
  height: 10%;
  left: 22%;
  width: 78%;
  background-color: #fff;
  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
  /*display: flex;*/
  justify-content: center; /* 在水平方向上居中对齐 */
}

.welcome-message {
  position: fixed;
  left: 60%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.welcome-text {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.tips {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #409eff;
}

.example-question {
  font-size: 18px;
  color: #666;
}
</style>
